<template>
  <div class="musiclist">
    <div class="musiclisttop">
      <!-- 精选歌单入口展示 -->
      <div class="highqualityEntry">
        <img class="bacgroundImg" :src="theFirstOfHighquality.coverImgUrl" />
        <div class="coverImg">
          <img :src="theFirstOfHighquality.coverImgUrl" alt="" />
        </div>
        <div class="EntryInfo">
          <div class="tag">
            <i class="iconfont icon-dianzan"></i>
            精品歌单
          </div>
          <div class="name">{{ theFirstOfHighquality.name }}</div>
          <div class="desc">{{ theFirstOfHighquality.copywriter }}</div>
        </div>
      </div>
      <!-- 歌单列表 -->
      <div class="musicListNavBar">
        <div class="left">
          <sort
            :sortList="sortList"
            :currentTag="currentTag"
            @clickSortBoxItem="clickSortBoxItem"
            @getSortList="getSortList"
          ></sort>
        </div>
        <div class="right">
          <sencod-bar
            :SecondNavBarData="hotTag"
            @clickSecondBarItem="clickSecondBarItem"
          ></sencod-bar>
        </div>
      </div>
    </div>

    <!-- 展示歌单列表 -->
    <list-card :listCardData="musicList" @clickListCardItem="clickListCardItem">
    </list-card>
  </div>
</template>

<script>
import ListCard from "@/components/listCard/ListCard.vue";
import Sort from "@/components/sort/Sort.vue";
import SencodBar from "@/components/secondnavbar/SecondBar.vue";
export default {
  name: "MyMusiclist",
  components: {
    ListCard,
    Sort,
    SencodBar,
  },
  data() {
    return {
      // 高质量歌单的第一条数据
      theFirstOfHighquality: {},
      // 歌单分类名称
      sortList: [],
      // 歌单列表
      musicList: [],
      // 当前分类名称
      currentTag: {},
      hotTag: [],
    };
  },
  created() {
    this.getTheFirstOfHighquality();
    this.getSort();
    this.getMusicList();
    this.getHotTag();
  },

  methods: {
    // 获取高质量歌单的第一条数据
    async getTheFirstOfHighquality() {
      const { data: res } = await this.$http("top/playlist/highquality", {
        params: { limit: 1 },
      });
      //  console.log(res);
      this.theFirstOfHighquality = res.playlists[0];
      // console.log(this.theFirstOfHighquality);
    },
    // 获取分类名称
    async getSort() {
      const { data: res } = await this.$http("playlist/catlist");
      // console.log(res);
      this.sortList = res.sub;
    },
    // 获取热门歌单tag数据
    async getHotTag() {
      const { data: res } = await this.$http("playlist/hot");
      // console.log(res);
      this.hotTag = res.tags;
      this.currentTag = res.tags[0];
      // console.log(this.hotTag);
    },
    // 根据分类名称获取歌单列表
    async getMusicList() {
      const { data: res } = await this.$http("top/playlist", {
        params: { cat: this.currentTag.name },
      });
      this.musicList = res.playlists;
      console.log(this.musicList);
    },
    // 接受点击传来的事件
    async clickSecondBarItem(index) {
      this.currentTag = this.hotTag[index];
      this.musicList = "";
      this.getMusicList();
    },
    // 点击listCard事件回调
    clickListCardItem(id) {
      console.log(id);
      this.$router.push({ name: "musiclistdetail", params: { id } });
    },
    // 接收sort传来的事件
    clickSortBoxItem(item) {
      this.currentTag.name = item.name;
      this.musicList = "";
      this.getMusicList();
    },
    getSortList() {
      this.getMusicList();
    },
  },
};
</script>

<style lang="less" scoped>
.highqualityEntry {
  position: relative;
  width: 100%;
  height: 160px;
  border-radius: 10px;
  overflow: hidden;
  z-index: 100;
  display: flex;
  width: 90%;
  margin: 10px auto;
}
.bacgroundImg {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  // height: 160px;
  transform: translateY(-80px);
  filter: blur(30px) brightness(70%);
}
.coverImg {
  width: 150px;
  height: 150px;
  border-radius: 15px;
  margin: 5px;

  img {
    width: 100%;
    height: 100%;
    border-radius: 15px;
  }
}
.EntryInfo {
  width: 250px;
  height: 150px;
  margin: auto 10px;
  .tag {
    color: #d59e54;
    border: 1px solid #d59e54;
    padding: 5px 10px;
    width: 88px;
    font-size: 12px;
    margin: 20px 10px 15px;
    border-radius: 15px;
  }
  .name {
    width: 400px;
    height: 20px;
    color: #ffffff;
    font-size: 16px;
    margin: 15px 0;
  }
  .desc {
    width: 400px;
    height: 15px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    margin: 15px 5px;
  }
}
.musicListNavBar {
  width: 95%;
  height: 70px;
  margin: 20px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.left {
  border-radius: 20px;
  cursor: pointer;
}
</style>